<template>
  <view class="city-container-view bg-black">
    <view class="city-item-view">
      <view class="city-item-video tw-text-white">
        <video
          :src="'/static/video/' + videoItem.src"
          show-center-play-btn="false"
          enable-play-gesture="true"
          objectFit="cover"
        ></video>
      </view>
      <view class="city-item-img">
        <img class="img-box" :src="videoItem.avatar"
      /></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "CityItem",
    props: {
      videoItem: {
        type: Object,
        required: true,
        default: () => ({
          author: "",
          avatar: "",
          src: "",
        }),
      },
    },
  };
</script>

<style>
  .bg-black {
    background-color: #000;
    color: gray;
  }
  .city-container-view {
    width: 100%;
    height: 100%;
  }
  .city-item-view {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .city-item-video {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .city-item-img {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 98;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .img-box {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-block;
  }
</style>
